<!DOCTYPE html>
<html>
  <head>
    <link href="/static/css.css" rel="stylesheet" type="text/css" />
    <link href="/static/quasar.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="q-app">
      <div class="q-pa-lg">
        <template v-for="(item,index) in list">
          <div
            class="row items-center q-mb-md q-col-gutter-x-md"
            v-if="typeof item === 'object'"
            :key="index"
          >
            <div class="col">
              <div class="row q-col-gutter-x-md">
                <div class="col-6">
                  <q-input
                    ref="domain"
                    placeholder="domain"
                    label="domain"
                    outlined
                    v-model="item[1]"
                    @input="domainInput(item)"
                  ></q-input>
                </div>
                <div class="col-6">
                  <q-input
                    ref="host"
                    placeholder="host"
                    label="host"
                    outlined
                    v-model="item[0]"
                    @input="hostInput(item)"
                  ></q-input>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <q-btn
                @click="del(index)"
                icon="close"
                color="negative"
                flat
                round
              ></q-btn>
            </div>
          </div>
        </template>
      </div>

      <q-btn
        v-if="changed"
        color="primary"
        class="fixed-bottom-left q-ml-xl q-mb-xl"
        label="save"
        @click="save"
      ></q-btn>
      <q-btn
        round
        class="fixed-bottom-right q-mr-xl q-mb-xl"
        color="green"
        icon="add"
        @click="add"
      ></q-btn>
    </div>

    <script src="/static/vue.min.js"></script>
    <script src="/static/quasar.umd.min.js"></script>
    <script src="/static/zh-hans.umd.min.js"></script>
    <script src="/static/axios.min.js"></script>

    <script>
      Quasar.lang.set(Quasar.lang.zhHans);

      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      new Vue({
        el: "#q-app",
        data: function () {
          return {
            list: [],
            changed: false,
            loaded: false,
          };
        },
        methods: {
          add() {
            this.list.push(["127.0.0.1", ""]);
            this.$nextTick(() => {
              let k = this.$refs.domain.length - 1;
              this.$refs.domain[k].focus();
            });
          },
          domainInput(item) {
            item[1] = item[1].replace(/.*?:\/\//, "");
            item[1] = item[1].replace(/:\d*/, "");
            item[1] = item[1].replace(/\/.*/, "");
          },
          hostInput(item) {
            // item[0] = item[0].replace(/[^\d\.]+/g, "");
            item[0] = item[0].replace(/.*[^\d]+(?=\d+\.\d+\.\d+\.\d)/, "");
            item[0] = item[0].replace(/(?<=\d+\.\d+\.\d+\.\d+)[^\d]+.*/, "");
          },
          save() {
            axios
              .post("http://127.0.0.1:8010/save", {
                content: this.list,
              })
              .then((res) => {
                console.log(res);
              });
          },
          del(index) {
            this.list.splice(index, 1);
          },
        },
        watch: {
          list: {
            handler(value) {
              this.changed = this.loaded;
            },
            deep: true,
          },
        },
        created() {
          axios.get("http://127.0.0.1:8010/all").then((res) => {
            if (res.data) {
              this.list = res.data;
              this.$nextTick(() => {
                this.loaded = true;
              });
            }
          });
        },
      });
    </script>
  </body>
</html>
